import React from 'react'
import { View } from 'react-native'
import { Metrics, Colors, Fonts } from '../../Themes'
import { API, WINDOW } from '../../Services'
import styles from '../Styles/CommonContainerStyles'
import ProductListCateScreen from "./ProductListCateScreen"
import { Tabs } from '@ant-design/react-native'
import { NavigationBar } from '../../Components/CustomNavibar'
import underscore from 'underscore'

export default class ProductListContainerScreen extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            dataSource_jcfenlei: [],
            titleList: []
        }
    }
    componentDidMount() {
        this.goodsCataList()
    }

    goodsCataList() {
        let key = WINDOW.showToastLoad()
        API.goodsCataList().then((response) => {
            WINDOW.hideToast(key)
            const { data, ok } = response
            if (ok ) {
                let list = data?.goodsCataList
                let temList = [{ cataCode: '' }]
                let dataSource_jcfenlei = underscore.union(temList, list)
                let titleList = list.map(
                    (element) => {
                        return { title: element.cataName }
                    }
                )
                let tem = [{ title: '全部' }]
                titleList = underscore.union(tem, titleList)
                this.setState({ dataSource_jcfenlei: dataSource_jcfenlei, titleList })
            } else {
                WINDOW.showToastError(data.msg || '请求失败！')
            }
        })
    }
 

    _renderContent = (element, index) => {
        return (
            <ProductListCateScreen key={index} gparent={element} navigation={this.props.navigation} />
        )
    }
    render() {
        if (this.state.titleList.length === 0) {
            return (
                <View style={[styles.container, { backgroundColor: 'white' }]}>
                    <NavigationBar title={{ title: '分类', tintColor: 'black' }} />
                </View>
            )
        } else
            return (
                <View style={[styles.container, { backgroundColor: 'white' }]}>
                    <NavigationBar title={{ title: '分类', tintColor: 'black' }} />
                    <Tabs
                        tabs={this.state.titleList}
                        tabBarActiveTextColor={Colors.mainColor}
                        tabBarTextStyle={{ fontSize: 11 }}
                        initialPage={0}>
                        {this.state.dataSource_jcfenlei.map(this._renderContent)}
                    </Tabs>
                    <View style={{backgroundColor:'clear',position:'absolute',width:'100%',height:Metrics.navBarHeight+40}}/>
                </View>
            )
    }
}